<template>

  <view class="t-info">

    <view class="t-b">填写个人信息</view>
    <form class="cl">
      <view class="t-a">
        <input type="text" name="realName" placeholder="请输入用户名" maxlength="11" v-model="realName"/>
      </view>
      <view class="t-a">
        <input type="password" name="password" maxlength="12" placeholder="请设置6-12位字符包含数字和字母的密码"
               v-model="password"/>
      </view>
      <view class="t-a">
        <input type="password" name="rePassword" maxlength="12" placeholder="请确认密码" v-model="rePassword"/>
      </view>
      <view class="t-a city-right-layout" @click="isShowAddressWindow = true">
        <view :class="isSelected() ? 'text-color' : 'hint-text-color'">
          {{ isSelected() ? getSelectAddress() : "请选择常驻城市" }}
        </view
        >
        <u-icon size="20" name="arrow-right"></u-icon>
      </view>

      <!--  地区选择 -->
      <u-picker
          ref="areaPicker"
          :defaultIndex="[0, 0, 0]"
          :show="isShowAddressWindow"
          :columns="columns"
          @cancel="isShowAddressWindow = false"
          @change="changeHandler"
          @confirm="onAddressConfirm"
      ></u-picker>
      <button @tap="nextStep()">继续</button>
    </form>
  </view>
</template>

<script>
import userApi from '@/api/user'
import passData from '@/api/requstUtil'
import {aesEncrypt, kk} from '@/common/js/crypto'
import {PROVINCE, CITY} from "../../common/addressData";

export default {
  data() {
    return {
      realName: '',
      password: '',
      rePassword: '',
      residentCity: '',
      userData: {},
      fromData: {
        province: '',
        city: '',
        town: '',
      },

      isShowAddressWindow: false,
      PROVINCE,
      CITY,
      columns: [PROVINCE, CITY[0]],
      provinceIndex: 0,
      cityIndex: 0,

    }
  },
  onLoad(option) {
    const eventChannel = this.getOpenerEventChannel();
    let that = this
    eventChannel.on('getUserData', function (data) {
      that.userData = data;
      console.log(data)
    })
  },
  methods: {
    getSelectAddress() {
      if (this.fromData.city) {
        return `${this.fromData.province}-${this.fromData.city}`;
      } else {
        return `${this.fromData.province}`;
      }
    },
    isSelected() {
      return this.fromData.province || this.fromData.city || this.fromData.town;
    },
    // 地址选择监听
    changeHandler(e) {
      const {columnIndex, index, picker} = e;
      if (columnIndex == 0) {
        // 切换省份
        this.provinceIndex = index;
        picker.setColumnValues(1, this.CITY[this.provinceIndex]);
      }
    },
    // 地区选择确定
    onAddressConfirm() {
      this.isShowAddressWindow = false;
      this.fromData.province = this.PROVINCE[this.provinceIndex];
      this.fromData.city = this.CITY[this.provinceIndex][this.cityIndex];
      // 确定选择后恢复默认index
      this.provinceIndex = 0;
      this.cityIndex = 0;
    },
    checkFrom() {
      if (!this.realName) {
        uni.showToast({title: '请输入用户名', icon: 'none'});
        return false;
      }
      if (!this.password) {
        uni.showToast({title: '请输入密码', icon: 'none'});
        return false;
      }
      if (!this.rePassword || this.password !== this.rePassword) {
        uni.showToast({title: '密码必须一致', icon: 'none'});
        return false;
      }
      // if (!this.residentCity) {
      //   return false;
      // }

      return true
    },
    nextStep() {
      if (this.checkFrom()) {
        let encrypt = aesEncrypt(this.phone + this.password, kk);
        let param = {
          ...this.userData,
          realName: this.realName,
          password: encrypt,
          tenantId: 'gysk',
          userName: this.userData.phone,
          residentCity: this.getSelectAddress(),
        }
        console.log('注册参数',param )
        userApi.register(param).then(res => {
          let data = passData(res);
          console.log("userApi.register", data)
          if (data) {
            this.doLogin(param)
          }
        })
      }
    },
    doLogin(param) {
      let newParam = {
        ...param
      }
      delete newParam.smsCode;
      userApi.login(newParam).then(res => {
        let data = passData(res);
        console.log("userApi.doLogin", data)
        if (data) {
          uni.setStorageSync('token', data.token);
          uni.navigateTo({url: '/pages/auth/uploadHeadImg'});
        }
      });
    },

  }
}
</script>

<style lang="scss" scoped>
.t-b {
  font-size: 18px;
  color: #000;
  padding: 35px 0 30px 0;
  font-weight: bold;
  text-align: center;
}


.t-info {
  width: 600rpx;
  margin: 0 auto;
  font-size: 28rpx;
  color: #000;

  button {
    font-size: 14px;
    background: rgb(240, 95, 93);
    color: #fff;
    height: 42px;
    line-height: 45px;
    border-radius: 9px;
    box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
    width: 55%;
  }

  input {
    padding: 0 10px 0 21px;
    height: 46px;
    line-height: 46px;
    margin-bottom: 26px;
    background: #f8f7fc;
    border-bottom: 1px solid #e9e9e9;
    font-size: 15px;
    border-radius: 5px;
  }
}

.city-right-layout {
  display: flex;
  flex: 1;
  margin-left: 10px;
  font-size: 14px;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  border-bottom: solid 1px #ccc;
  margin-bottom: 25px;
  padding-bottom: 10px;
  padding-left: 12px;

  .hint-text-color{
    color: grey;
  }
}


</style>
